<template>
	<view class="container">
		<view class="header">
			<u-search :showAction="showAction" placeholder="请输入商品名称" v-model="keyword" @search="handleSearch"></u-search>
		</view>
		<view class="content">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view v-if="list.length>0" v-for="(item,index) in list" :key="index" @click="handleItem(item,index)">
					<view :class="indexs.includes(index)?'items_active':'items'">
						<view class="itemsBlock">
							{{item.supplierName||''}}（{{item.id}})
						</view>
						<view style="width: 35rpx;height: 35rpx;" v-if="indexs.includes(index)">
							<image style="width: 35rpx;height: 35rpx;" src="/static/work/yes_o.png" mode=""></image>
						</view>
					</view>
				</view>
				<view v-if="list.length==0" class="None">
					暂无信息
				</view>
			</scroll-view>
		</view>
		<view class="tj">
			<view class="tjText" @click="handleSubmit">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		supplierProduct
	} from '@/api/store.js'
	export default {
		data() {
			return {
				showAction:false,
				keyword:'',
				scrollTop:0,
				queryParams: {
					pageNo: 1, //页码
					pageSize: 10, //条数
					supplierId:''
				},
				list: [], //列表数据
				total: 0, //总条数
				goods:[],//选中的商品
				indexs:[],//下标
			}
		},
		onLoad(option) {
			this.queryParams.supplierId = option.id
			this.getList()
		},
		methods: {
			// 获取BOM单列表
			async getList() {
				let res = await supplierProduct(this.queryParams)
				this.list = [...this.list,...res.data.list]
				this.total = res.data.total
			},
			// 搜索
			handleSearch(){},
			// 确定提交
			handleSubmit(item,index){
				uni.$emit('supplierGoods', { data:this.goods});
				uni.navigateBack()
			},
			// 选中商品
			handleItem(item,index){
				// 存在对象则删除，不存在插入
				if(this.goods.some(items => items.id == item.id)){
					let i = this.goods.findIndex(items=>items.id==item.id)
					this.goods.splice(i,1)
				}else{
					this.goods.push(item)
				}
				
				// 存在则删除，不存在插入
				if(this.indexs.includes(index)){
					let i = this.indexs.indexOf(index)
					this.indexs.splice(i,1)
				}else{
					this.indexs.push(index)
				}
			},
			upper(){},
			lower(){},
			scroll(){}
		}
	}
</script>

<style scoped>
	.tjText{
		width: 690rpx;
		height: 70rpx;
		background-color: #007DFE;
		color: #FFFFFF;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 70rpx;
	}
	.tj{
		width: 100%;
		height: 250rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}
	.buts{
		width: 90rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 22rpx;
		background-color: #007DFE;
		color: #FFFFFF;
		border-radius: 10rpx;
	}
	.itemsBlock{
		height: 99rpx;
		line-height: 99rpx;
		width: 550rpx;
		 text-overflow: ellipsis;
		    overflow: hidden;
		    word-break: break-all;
		    white-space: nowrap;
	}
	.None{
		width: 100%;
		height: 150rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
	}
	.items{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #EBEBEB;
		font-size: 26rpx;
		justify-content: space-between;
		padding: 0 10rpx;
		box-sizing: border-box;
		margin-bottom: 2rpx;
	}
	.items_active{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #EBEBEB;
		font-size: 26rpx;
		justify-content: space-between;
		/* background-color: #f3f8f8; */
		padding: 0 10rpx;
		box-sizing: border-box;
		color: #177a77;
		margin-bottom: 2rpx;
	}
	.header{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
		margin-top: 15rpx;
	}
	.content{
		width: 720rpx;
		height: 100vh;
		background-color: #FFFFFF;
		border-radius: 5rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}
	.scroll-Y{
		width: 700rpx;
		height: calc(100vh - 300rpx);
	}
	.container{
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
	}
</style>